<template>
  <el-switch :active-text="test1"
  :inactive-text="test2"   class="demo" inactive-color="#13ce66" v-model="value2" active-color="#ff4949"
  @change="switchChange" :width='width' :active-value='active' :inactive-value='inactive' ></el-switch>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'CrmSwitch',
  props: {
    width:Number,
    label: {  // 按钮显示文本
      type: String,
      default: 'Button'
    },
    disabled: {  // 按钮是否禁用
      type: Boolean,
      default: false
    },
    value:{
      type:String,
    },
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },
    test1:{
      type: String,
      default: '启用'
    },
    test2:{
      type: String,
      default: '停用'
    },
    active:{
      type: String,
      default: '1'
    },
    inactive:{
      type: String,
      default: '2'
    },
  },
  data() {
    return {
      value2:this.value
  }
  },
  methods: {
    hasPerms: function (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) & !this.disabled
    },
    switchChange(type){
      this.$emit("change",{type:type})
    },
  },
  mounted() {
  }
}
</script>

<style scoped>
.demo /deep/ .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.demo /deep/ .el-switch__label--left {
  z-index: 9;
  left: 20px;
}
.demo /deep/ .el-switch__label--right {
  z-index: 9;
  left: -5px;
}
.demo /deep/ .el-switch__label.is-active {
  display: block;
}
/* .demo /deep/  .el-switch__core{
  width: 58px!important;
} */
</style>
